<template>
  <div>
    <!-- 数据筛选部分 -->
    <el-form :inline="true" :model="page" class="demo-form-inline">
      <el-form-item label="产品单号">
        <el-input
          v-model="page.ProductNum"
          placeholder="请输入单号"
          clearable
        />
      </el-form-item>
      <el-form-item label="产品名称"> 
        <el-input
          v-model="page.ProductName"
          placeholder="请输入产品名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="page.CategoryId"
          placeholder="请选择类型"
          clearable
          style="width: 150px"
        >
          <el-option
            v-for="items in Shopinfo"
            :label="items.categoryName"
            :value="items.categoryId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getProduct()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据列表部分 -->
    <div class="table - section" style="width: 1500px">
      <el-button type="primary" @click="open()">新增</el-button>
      <!-- <el-button type="primary" @click="exportSelectedProductDataToXlsx">导出</el-button>  @selection-change="handleSelectionChange"-->
      <el-table ref="tableRef" :data="tableData" style="width: 100%" >
        <el-table-column type="selection"  ></el-table-column>
        <el-table-column prop="productId" label="产品ID"></el-table-column>
        <el-table-column prop="productId" label="产品编号"></el-table-column>
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column
          prop="manufacturerCode"
          label="厂商编码"
        ></el-table-column>
        <el-table-column prop="internalCode" label="内部编码"></el-table-column>
        <el-table-column prop="specification" label="规格" width='200px'></el-table-column>
        <el-table-column prop="unitId" label="单位">
          <template v-slot="scope">
            <p v-if="scope.row.unitId == 1">单位1</p>
            <p v-if="scope.row.unitId == 2">单位2</p>
          </template>
        </el-table-column>
        <el-table-column prop="categoryId" label="类别"></el-table-column>
        <el-table-column prop="lowerLimit" label="预警(下)"></el-table-column>
        <el-table-column prop="upperLimit" label="预警(上)"></el-table-column>
        <el-table-column
          prop="description"
          label="备注"
          width="150px"
        ></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column
          prop="supplie"
          label="默认供应商"
          width="150px"
        ></el-table-column>
        <el-table-column prop="customer" label="客户"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template #default="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="dele(scope.row.productId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pageSize"
      :page-sizes="[15, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageind.totalcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    />
  </div>

  <!-- 编辑产品弹框 -->
  <el-dialog v-model="dialogFormVisible1" title="产品编辑" width="1000px">
    <el-form :model="forms">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品编号" :label-width="formLabelWidth">
            <el-input v-model="forms.productNum" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称" :label-width="formLabelWidth">
            <el-input v-model="forms.productName" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="厂家编号" :label-width="formLabelWidth">
            <el-input v-model="forms.manufacturerCode" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内部编码" :label-width="formLabelWidth">
            <el-input v-model="forms.internalCode" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单位" :label-width="formLabelWidth">
            <el-select v-model="forms.unitId" placeholder="请选择">
             <el-option
              v-for="items in Shopinfo1"
              :label="items.unitAppName"
              :value="items.unitAppId"
             />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类别" :label-width="formLabelWidth">
            <el-select v-model="forms.categoryId" placeholder="请选择">
              <!-- v-for="items in Shopinfo" v-for="items in Shopinfo" -->
              <el-option
                label="线材类"
                :value="1"
              />
            </el-select>
            <!-- <el-select v-model="forms.categoryId" placeholder="请选择">
              <el-option
                v-for="items in Shopinfo"
                :label="items.categoryName"
                :value="items.categoryId"
              />
            </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上限值" :label-width="formLabelWidth">
            <el-input v-model="forms.upperLimit" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下限值" :label-width="formLabelWidth">
            <el-input v-model="forms.lowerLimit" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="规格" :label-width="formLabelWidth">
            <el-input v-model="forms.specification" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="forms.price" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="默认仓库" :label-width="formLabelWidth">
            <el-select v-model="forms.wHouseId" placeholder="请选择">
              <el-option label="仓库a" :value="1"></el-option>
              <el-option label="仓库b" :value="2"></el-option>
              <el-option label="仓库c" :value="3"></el-option>
              <el-option label="仓库d" :value="4"></el-option>
              <!-- <el-option
                v-for="items in Shopinfo3"
                :label="items.wHouseName"
                :value="items.wHouseId"
              /> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认库位" :label-width="formLabelWidth">
            <el-select v-model="forms.wHouseTypeId" placeholder="请选择">
              <el-option
                v-for="items in Shopinfo2"
                :label="items.wHouseTypeName"
                :value="items.wHouseTypeId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="默认供应商" :label-width="formLabelWidth">
            <el-select v-model="form.supplie" placeholder="请选择供应商">
              <el-option label="供应商A" value="供应商A" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认客户" :label-width="formLabelWidth">
            <el-select v-model="form.customer" placeholder="请选择客户">
              <el-option label="客户A" value="客户A" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="forms.description"
              autocomplete="off"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateproduct()"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增产品弹框 -->
  <el-dialog v-model="dialogFormVisible" title="产品新增" width="1000px">
    <el-form :model="form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品编号" :label-width="formLabelWidth">
            <el-input v-model="form.productNum" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品名称" :label-width="formLabelWidth">
            <el-input v-model="form.productName" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="厂家编号" :label-width="formLabelWidth">
            <el-input v-model="form.manufacturerCode" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内部编码" :label-width="formLabelWidth">
            <el-input v-model="form.internalCode" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单位" :label-width="formLabelWidth">
            <el-select v-model="form.unitId" placeholder="请选择">
             
              <el-option
               v-for="items in Shopinfo1"
               :label="items.unitAppName"
               :value="items.unitAppId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类别" :label-width="formLabelWidth">
            <el-select v-model="form.categoryId" placeholder="请选择">
              <!-- v-for="items in Shopinfo" v-for="items in Shopinfo" -->
              <el-option
                label="线材类"
                :value="1"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上限值" :label-width="formLabelWidth">
            <el-input v-model="form.upperLimit" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下限值" :label-width="formLabelWidth">
            <el-input v-model="form.lowerLimit" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="规格" :label-width="formLabelWidth">
            <el-input v-model="form.specification" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="默认仓库" :label-width="formLabelWidth">
            <el-select v-model="form.wHouseId" placeholder="请选择仓库">
              <el-option label="仓库a" :value="1"></el-option>
              <el-option label="仓库b" :value="2"></el-option>
              <el-option label="仓库c" :value="3"></el-option>
              <el-option label="仓库d" :value="4"></el-option>
              <!-- <el-option
                v-for="items in Shopinfo3"
                :label="items.wHouseName"
                :value="items.wHouseId"
              /> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认库位" :label-width="formLabelWidth">
            <el-select v-model="form.wHouseTypeId" placeholder="请选择库位">
              <el-option
                v-for="items in Shopinfo2"
                :label="items.wHouseTypeName"
                :value="items.wHouseTypeId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="供应商" :label-width="formLabelWidth">
            <el-select v-model="form.supplie" placeholder="请选择供应商">
              <el-option label="供应商A" value="供应商A" />
            </el-select>


            <!-- <el-input v-model="form.supplie" autocomplete="off" /> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户" :label-width="formLabelWidth">
            <el-select v-model="form.customer" placeholder="请选择客户">
              <el-option label="客户A" value="客户A" />
            </el-select>

            <!-- <el-input v-model="form.customer" autocomplete="off" /> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="form.description"
              autocomplete="off"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="Addpro()"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import { useRoute, useRouter } from "vue-router";
import { KongaUrl } from '@/axios/axiosHelp'
const tableRef = ref(null);

onMounted(() => {
  getProduct();
  GetwHouseType();
  GetWHouseType1();
  Getunit();
  // GetWHouseType2();
});
const Shopinfo = <any>ref([]);
  //类别
const GetwHouseType = () => {
  KongaUrl("/wangcong/api/Whouase/GetCategory").then((res) => {
    Shopinfo.value = res.data.data;
  });
};
//单位
const Shopinfo1 = <any>ref([]);
const Getunit = () => {
  KongaUrl("/wangxin/api/UnitManage/GetUnit",{
    params:{
      PageIndex:1,
      PageSize:11000
   }
  }).then((res) => {
    Shopinfo1.value = res.data.lists;
    console.log('单位',Shopinfo1.value)
  });
};
const Shopinfo2 = <any>ref([]);
const GetWHouseType1 = () => {
  KongaUrl("/wangcong/api/Whouase/GetWHouseType").then((res) => {
    Shopinfo2.value = res.data.data;
  });
};
// const Shopinfo3 = <any>ref([]);
// const GetWHouseType2 = () => {
//   KongaUrl("/wangxin/api/UnitManage/GetUnit",{
//    params:{
//     PageIndex:1,
//     PageSize:11000
//    }
//   }).then((res) => {
//     Shopinfo3.value = res.data.data;
//     console.log(Shopinfo3.value)
//   });
// };

const page = reactive({
  ProductNum: "",
  ProductName: "",
  CategoryId: "",
  pageindex: 1,
  pageSize: 15,
});
const pageind = reactive({
  totalpage: 0,
  totalcount: 0,
});
//存储查询出的产品数据
const tableData = ref([]);
//查询产品
const getProduct = () => {
  KongaUrl({
    url: "/activity/api/Peoduct/GetProductsByConditions/paginated",
    method: "get",
    params: {
      ProductNum: page.ProductNum,
      ProductName: page.ProductName,
      Category: page.CategoryId,
      pageindex: page.pageindex,
      pageSize: page.pageSize,
    },
  }).then((res) => {
    if (res.status == 200) {
      console.log(res.data);
      tableData.value = res.data.result.list;
      pageind.totalcount = res.data.result.totalcount;
      pageind.totalpage = res.data.result.totalPage;
    }
  });
};
//删除产品
const dele = (productId: any) => {
  ElMessageBox.confirm("您确定要操作吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })

    .then(() => {
      KongaUrl({
        url: "/activity/api/Peoduct/DeleteProduct",
        method: "post",
        params: {
          id: productId,
        },
      })
        .then((res) => {
          if (res.status == 200) {
            ElMessage({
              type: "success",
              message: "删除成功",
            });
            getProduct();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
};

//打开新增弹窗
const open = () => {
  dialogFormVisible.value = true;
};
//新增产品方法
const Addpro = () => {
  KongaUrl({
    url: "/activity/api/Peoduct/InsertProduct",
    method: "post",
    data: form,
  }).then((res) => {
    if (res.status == 200) {
      ElMessage.success("新增成功");
      console.log(form);
      dialogFormVisible.value = false;
      getProduct();
    }
  });
};
onMounted(() => {
  form.productNum = generateTwelveDigitNumber();
});

const generateTwelveDigitNumber = () => {
  const characters = "0123456789";
  let result = "";
  for (let i = 0; i < 6; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
};

const dialogFormVisible1 = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const forms = reactive({
  productId: 0,
  productNum: "",
  productName: "",
  manufacturerCode: "",
  internalCode: "",
  unitId: 0,
  categoryId: 0,
  upperLimit: 0,
  lowerLimit: 0,
  specification: "",
  price: 0,
  wHouseId: 0,
  wHouseTypeId: 0,
  description: "",
  supplie: "",
  customer: "",
});

const form = reactive({
  productNum: "",
  productName: "",
  manufacturerCode: "",
  internalCode: "",
  unitId: 0,
  categoryId: 0,
  upperLimit: 0,
  lowerLimit: 0,
  specification: "",
  price: 0,
  wHouseId: 0,
  wHouseTypeId: 0,
  description: "",
  supplie: "",
  customer: "",
});

const edit = (row: any) => {
  console.log("铲数据", row);
  forms.productId = row.productId;
  forms.productNum = row.productNum;
  forms.productName = row.productName;
  forms.manufacturerCode = row.manufacturerCode;
  forms.internalCode = row.internalCode;
  forms.unitId = row.unitId;
  forms.categoryId = row.categoryId;
  forms.upperLimit = row.upperLimit;
  forms.lowerLimit = row.lowerLimit;
  forms.specification = row.specification;
  forms.price = row.price;
  forms.wHouseId = row.wHouseId;
  forms.wHouseTypeId = row.wHouseTypeId;
  forms.supplie = row.supplie;
  forms.customer = row.customer;
  forms.specification = row.specification;
  forms.description = row.description;
  console.log('传输数据',forms.productId)
  dialogFormVisible1.value = true;
};

const updateproduct = () => {
  KongaUrl({
    url: "/activity/api/Peoduct/UpdateProduct",
    method: "post",
    data: forms,
  }).then((res) => {
    if (res.status == 200) {
      ElMessage.success("更新成功");
      dialogFormVisible1.value = false;
      getProduct();
    }
  });
};

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  page.pageSize = val;
  getProduct();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.pageindex = val;
  getProduct();
};
onMounted(() => {
  form.productNum = generateTwelveDigitNumber();
});
</script>

<style scoped>
.productmanagement {
  padding: 20px;
}
.filtersection {
  margin-bottom: 20px;
}
.tablesection {
  border: 1px solid #ebeef5;
}
</style>    